<template>
  <!-- 使用Transition组件包裹遮罩层 -->
  <Transition name="modal" appear>
    <div
        v-if="visible"
        class="modal-overlay"
        @click="handleClose"
    >
      <!-- 评价报告容器 -->
      <div
          class="modal-container"
          @click.stop
      >
        <!-- 关闭按钮 -->
        <button
            @click="handleClose"
            class="close-button"
        >
          <X class="close-icon"/>
        </button>

        <!-- 评价报告内容 -->
        <div class="modal-content">
          <!-- 标题 -->
          <div class="header-section">
            <h2 class="main-title">面试评价报告</h2>
            <p class="subtitle">候选人综合面试表现评估</p>
          </div>

          <!-- 评分概览 -->
          <div class="score-overview">
            <div class="score-card">
              <div class="score-header">
                <h3 class="score-title">面试总评</h3>
                <div class="score-display">
                  <Star class="star-icon"/>
                  <span class="score-number">{{ data.overallRating }}</span>
                  <span class="score-total">/5.0</span>
                </div>
              </div>
              <div class="progress-bar-container">
                <div
                    class="progress-bar"
                    :style="{ width: getProgressWidth(data.overallRating) }"
                ></div>
              </div>
            </div>
          </div>

          <!-- 详细评价 -->
          <div class="details-section">
            <!-- 各项评分 -->
            <div class="rating-section">
              <h3 class="section-title">面试表现评分</h3>
              <div class="rating-items">
                <div
                    v-for="(item, index) in ratingItems"
                    :key="item.label"
                    class="rating-item"
                >
                  <span class="rating-label">{{ item.label }}</span>
                  <div class="rating-display">
                    <div class="rating-bar-container">
                      <div
                          class="rating-bar"
                          :class="getRatingBarClass(index)"
                          :style="{ width: getProgressWidth(item.rating) }"
                      ></div>
                    </div>
                    <span class="rating-value">{{ item.rating }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 评价内容 -->
            <div class="content-section">
              <h3 class="section-title">面试表现总结</h3>
              <div class="content-box">
                <p class="content-text">{{ data.performanceSummary }}</p>
              </div>
            </div>

            <!-- 面试亮点 -->
            <div class="content-section">
              <h3 class="section-title">面试亮点</h3>
              <div class="suggestions-list">
                <div
                    v-for="(highlight, index) in data.highlights"
                    :key="index"
                    class="suggestion-item"
                >
                  <CheckCircle class="suggestion-icon"/>
                  <span class="suggestion-text">{{ highlight }}</span>
                </div>
              </div>
            </div>

            <!-- 改进建议 -->
            <div class="suggestions-section">
              <h3 class="section-title">发展建议</h3>
              <div class="suggestions-list">
                <div
                    v-for="(suggestion, index) in data.developmentSuggestions"
                    :key="index"
                    class="suggestion-item"
                >
                  <CheckCircle class="suggestion-icon"/>
                  <span class="suggestion-text">{{ suggestion }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
import {computed, onMounted, onUnmounted} from 'vue'
import {X, Star, CheckCircle} from 'lucide-vue-next'
import {getInterviewEvaluation} from "@/http/m_api/interview";

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  resumeId: {
    type: String,
    required: true
  },
})

// 定义emits
const emit = defineEmits(['close'])

let data = ref()

// 评分项目
const ratingItems = computed(() => [
  {label: '专业技能', rating: getFloat(data.value.professionalSkillsRating)},
  {label: '沟通表达', rating: getFloat(data.value.communicationRating)},
  {label: '逻辑思维', rating: getFloat(data.value.logicalThinkingRating)},
  {label: '学习能力', rating: getFloat(data.value.learningAbilityRating)}
])

const getFloat = (num) =>{
  return num.toFixed(1);
}

// 关闭模态框
const handleClose = () => {
  emit('close')
}

// 计算进度条宽度百分比
const getProgressWidth = (rating) => {
  return `${(rating / 5) * 100}%`
}

// 获取评分颜色类名
const getRatingBarClass = (index) => {
  const classes = ['rating-bar-green', 'rating-bar-blue', 'rating-bar-purple', 'rating-bar-orange']
  return classes[index % classes.length]
}

// 键盘事件监听（ESC键关闭）
const handleKeydown = (event) => {
  if (event.key === 'Escape' && props.visible) {
    handleClose()
  }
}

// 组件挂载时添加键盘事件监听
onMounted(async () => {
  const res = await getInterviewEvaluation(props.resumeId)
  data.value = res.data
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style lang="scss" scoped>
/* Vue Transition 动画类 */
.modal-enter-active {
  transition: all 0.3s ease-out;
}

.modal-leave-active {
  transition: all 0.25s ease-in;
}

.modal-enter-from {
  opacity: 0;
}

.modal-enter-to {
  opacity: 1;
}

.modal-leave-from {
  opacity: 1;
}

.modal-leave-to {
  opacity: 0;
}

/* 模态框容器的进入和离开动画 */
.modal-enter-active .modal-container {
  transition: all 0.3s ease-out;
}

.modal-leave-active .modal-container {
  transition: all 0.25s ease-in;
}

.modal-enter-from .modal-container {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}

.modal-enter-to .modal-container {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-leave-from .modal-container {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-leave-to .modal-container {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}

/* 遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

/* 模态框容器 */
.modal-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 42rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

/* 关闭按钮 */
.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background-color: #f3f4f6;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.close-button:hover {
  background-color: #e5e7eb;
  color: #374151;
}

.close-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* 模态框内容 */
.modal-content {
  padding: 2rem;
}

/* 标题区域 */
.header-section {
  margin-bottom: 1.5rem;
}

.main-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111827;
  margin-bottom: 0.5rem;
}

.subtitle {
  color: #6b7280;
}

/* 评分概览 */
.score-overview {
  margin-bottom: 2rem;
}

.score-card {
  background: linear-gradient(to right, #eff6ff, #eef2ff);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.score-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.score-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.score-display {
  display: flex;
  align-items: center;
}

.star-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #fbbf24;
  fill: currentColor;
}

.score-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111827;
  margin-left: 0.5rem;
}

.score-total {
  color: #6b7280;
  margin-left: 0.25rem;
}

.progress-bar-container {
  width: 100%;
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 0.5rem;
}

.progress-bar {
  background: linear-gradient(to right, #3b82f6, #6366f1);
  height: 0.5rem;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* 详细内容区域 */
.details-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

/* 评分项目 */
.rating-section {
  margin-bottom: 1.5rem;
}

.rating-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rating-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rating-label {
  color: #374151;
}

.rating-display {
  display: flex;
  align-items: center;
}

.rating-bar-container {
  width: 8rem;
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 0.5rem;
  margin-right: 0.75rem;
}

.rating-bar {
  height: 0.5rem;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.rating-bar-green {
  background-color: #10b981;
}

.rating-bar-blue {
  background-color: #3b82f6;
}

.rating-bar-purple {
  background-color: #8b5cf6;
}

.rating-bar-orange {
  background-color: #f59e0b;
}

.rating-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  width: 2rem;
  text-align: right;
}

/* 评价内容 */
.content-section {
  margin-bottom: 1.5rem;
}

.content-box {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
}

.content-text {
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* 改进建议 */
.suggestions-section {
  margin-bottom: 1.5rem;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
}

.suggestion-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #10b981;
  margin-top: 0.125rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.suggestion-text {
  color: #374151;
}

/* 自定义滚动条样式 */
.modal-container::-webkit-scrollbar {
  width: 6px;
}

.modal-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.modal-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0.5rem;
  }

  .modal-content {
    padding: 1.5rem;
  }

  .score-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .rating-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .rating-display {
    width: 100%;
  }

  .rating-bar-container {
    flex: 1;
    margin-right: 0.5rem;
  }

  .footer-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  .primary-button,
  .cancel-button {
    width: 100%;
    text-align: center;
  }
}
</style>